<template>

    <div class="main-chat">
        <div class="info-header">

            {{ chat_info.chat_name }}
        </div>
        <div class="text-box">
            <el-input 
            class="input-box"
            type="textarea"
            v-model="msg"
            placeholder=""
            :rows="7"
            show-word-limit
            resize="none"
            :autosize="{ minRows: 7, maxRows: 7 }">
            </el-input>
        </div>
        <div class="send-icon" @click="sendMsg(chat_info.id)">
            <el-icon  :size="30" >
                <Top></Top>
            </el-icon>
        </div>
        
    </div>
</template>

<script setup>
import { ref } from 'vue';
import {Search,Top} from '@element-plus/icons-vue'
import {sendMsgToGroup} from '../../api/user'
const msg = ref('')

defineProps({
    chat_info:{
        type: Object,
        default:{
            chat_name: "",
            chat_type: 'group',
            id:0,
        }
    }
})


const sendMsg = async(id) => {
    var res = await sendMsgToGroup(msg.value, id)
    msg.value = ''
    console.log(res.data)
}
</script>

<style scoped>

.info-header{
    display: flex;
    align-items: center;
    font-size: 2em ;
    background-color:azure;
    position: fixed;
    top: 0;
    width: 100%;
    height:8%;
}
.main-chat{
    background-color: aquamarine;
    position: fixed;
    top:0;
    left: 20%;
    width: 80%;
    height: 100%;
}
.send-icon{
    position: relative;
    top:73%;
    left: 95%;
}
.input-box{
    width: 100%;
    height: 100%;
    overflow: auto;
    color: black;
}
.text-box{
    position: relative;
    background-color: #fff;
    top: 80%;
    width: 100%;
    height: 20%;
    

}

</style>